import React, { useEffect } from "react";
import { Button, Toast } from "antd-mobile";
import $fetch from "../../../../utils/app/$fetch";
import moment from "moment";

const StepInit = ({ state, dispatch }: any) => {
  useEffect(() => {
    queryClub();
  }, []);

  const queryClub = async () => {
    try {
      const res: any = await $fetch("/star/member");
      if (!res) {
        dispatch({ status: "no", loaded: true, memebrId: "", memberName: "" });
      } else {
        dispatch({
          status: "yes",
          loaded: true,
          memberId: res?.memberId,
          memberTime: res?.memberTime,
          memberName: res?.memberName,
          expireTime: res?.expireTime,
          memberAvatar: res?.memberAvatar,
        });
      }
    } catch (error) {
      console.log(error, "______error");
    }
  };

  const renderView = () => {
    if (!state?.loaded) {
      return null;
    } else if (state?.status === "yes") {
      return (
        <>
          <div className="join_detail common_wraper">
            <h5>您是fanclub会员{state?.memberTime > 0 ? `，已加入会员${state?.memberTime}天` : ''}</h5>
            <div>
              <div className="that_vip">
                <div>有效期至{moment(state?.expireTime).format("YYYY年MM月DD日")}</div>
                <div>请在到期前30内进行续费</div>
              </div>
              <Button
                className="button"
                onClick={() => dispatch({ currentStep: 1, clickChange: true })}
              >
                会员续费
              </Button>
            </div>
          </div>
          <div className="select_member common_wraper">
            <div>
              {/* <img src={require("../../../../asset/imgs/mask.png")} alt="" /> */}
              <img src={state?.memberAvatar} alt="" />
              <div>{state?.memberName}</div>
            </div>
            <Button
              className="button"
              // onClick={changeMember}
              onClick={() => dispatch({ currentStep: 0 })}
            >
              更改
            </Button>
          </div>
        </>
      );
    }
    return (
      <div className="not_join common_wraper">
        <div>当前您还没有入会</div>
        <Button className="button" onClick={() => dispatch({ currentStep: 0 })}>
          立即入会
        </Button>
      </div>
    );
  };

  return renderView();
};

export default StepInit;
